<template>
	<view class="donate_info">
		<view class="title">
			<view class="key">捐赠信息</view>
			<view class="value" v-if="form.donor_type==1">个人</view>
			<view class="value" v-if="form.donor_type==2">企业/单位</view>
		</view>

		<!-- <view class="title">捐赠信息</view>
		<view class="tabs">
			<view class="item" :class="type==1?'active':''" @click="type=1">个人</view>
			<view class="item" :class="type==2?'active':''" @click="type=2">企业/单位</view>
		</view> -->
		<view class="list" v-if="form.donor_type==1">
			<view class="cell">
				<view class="label">姓名</view>
				<input v-model="form.donor_name" disabled placeholder="姓名" />
			</view>
			<view class="cell">
				<view class="label">联系电话</view>
				<input v-model="form.donor_phone" disabled placeholder="电话" />
			</view>
			<view class="cell">
				<view class="label">学校</view>
				<input v-model="form.donor_school" disabled placeholder="学校" />
			</view>
			<view class="cell">
				<view class="label">年级</view>
				<input v-model="form.donor_grade" disabled placeholder="年级" />
			</view>
			<view class="cell">
				<view class="label">专业</view>
				<input v-model="form.donor_major" disabled placeholder="专业" />
			</view>
		</view>

		<view class="list" v-else>
			<view class="cell">
				<view class="label">公司名称</view>
				<input v-model="form.donor_company" disabled placeholder="公司名称" />
			</view>
			<view class="cell">
				<view class="label">联系电话</view>
				<input v-model="form.donor_phone" disabled placeholder="电话" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			form: {
				type: Object,
				default: () => {
					return {
						donor_type: 1,
						donor_name: "",
						donor_phone: "",
						donor_school: "",
						donor_grade: "",
						donor_major: "",
						donor_company: ""
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.donate_info {
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 28rpx 20rpx;
		box-sizing: border-box;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.key {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

			.value {
				font-weight: bold;
				font-size: 28rpx;
				color: #FF8133;
			}
		}

		.list {
			.cell {
				display: flex;
				margin-top: 20rpx;
				justify-content: space-between;

				.label {
					font-size: 28rpx;
					color: #333333;
				}

				input {
					font-size: 28rpx;
					text-align: right;
				}
			}
		}
	}
</style>